<template>
  <div id="rankingCards-box" @wheel.stop="handleScroll">
    <div class="card" v-for="(item, index) in listData" :key="index" @click="toEpPage(item.mangaId)">
      <div class="number">{{ index + 1 }}</div>
      <img loading="lazy" decoding="async" :src="item.thumbCoverUrl ? item.thumbCoverUrl : item.coverUrl" alt="">
      <div class="content">
        <h1 class="text-ellipsis">{{ item.name }}</h1>
        <div class="text-ellipsis">{{ item.cnTeam }}</div>
        <br/>
        <h4>更新</h4>
        <div class="content-number">
          {{ item.updateCount }}
          <a>话!!</a>
        </div>
      </div>
    </div>
    <div class="card" v-for="(index) in 10 - (listData ? listData.length : 0)" :key="index + '_'">
      <div class="number">{{ index + (listData ? listData.length : 1) }}</div>
      <el-skeleton animated>
        <template slot="template">
          <el-skeleton-item style="width: 180px;height: 250px;" variant="image" content="等待上榜"/>
        </template>
      </el-skeleton>
      <div class="content">
        <el-skeleton :rows="3" animated/>
        <div class="content-number-skeleton">
          空席!
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'rankingCards',
  props: ['listData'],
  data() {
    return {
      activeIndex: 0
    }
  },
  methods: {
    handleScroll(event) {
      // 阻止默认滚动行为
      event.preventDefault();
      // 水平滚动距离
      var wheelDelta = event.deltaY || event.detail || event.wheelDelta;
      var delta = parseInt(wheelDelta);
      document.querySelector('#rankingCards-box').scrollLeft += delta;
    },
    toEpPage(id) {
      this.$router.push("/mgEp?id=" + id)
    }
  }
}
</script>

<style scoped lang="scss">
#rankingCards-box {
  width: 100%;
  height: 350px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
  padding: 0 5px;

  .card {
    margin: 10px 0 10px 0;
    min-width: 390px;
    width: 390px;
    height: 300px;
    background: linear-gradient(rgba(227, 227, 227, 0.59), transparent);
    border: 1px solid rgb(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: -1px 2px 5px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(30px);
    display: flex;
    align-items: center;
    padding: 0 10px;
    transition: all 0.2s ease;
    overflow: hidden;
    position: relative;
    cursor: pointer;

    & img {
      width: 180px;
      height: 250px;
      object-fit: contain;
    }

    .number {
      position: absolute;
      font-size: 200px;
      font-style: italic;
      font-family: 'consolas', sans-serif !important;
      color: var(--theme-color);
      opacity: 0.2;
      z-index: -2;
      top: 0;
      right: 10px;
      transform: translateX(30px) translateY(-50px) rotate(10deg);
    }

    .content {
      width: 190px;
      height: 250px;
      display: flex;
      flex-direction: column;
      margin-left: 20px;
      position: relative;

      .content-number {
        color: var(--theme-color);
        font-family: 'MK851-font', sans-serif;
        font-size: 90px;
        position: absolute;
        bottom: -10px;
        right: 50px;
        height: 50%;
        display: flex;
        align-items: flex-start;

        a {
          position: absolute;
          right: -40px;
          bottom: 20px;
          transform: rotate(15deg);
          align-self: flex-end;
          float: right;
          font-size: 26px;
        }
      }

      .content-number-skeleton {
        color: var(--theme-color);
        font-family: 'MK851-font', sans-serif;
        font-size: 50px;
        position: absolute;
        height: 50%;
        bottom: -30px;
        right: 30px;
        transform: rotate(15deg);
      }
    }

  }

  .card:focus-within ~ .card, .card:hover ~ .card {
    transform: translateX(210px);
  }

  .card:not(:first-child) {
    box-shadow: -9px 2px 5px rgba(0, 0, 0, 0.25);
    margin-left: -210px;

    &:hover {
      box-shadow: -11px 8px 5px rgba(0, 0, 0, 0.25);
    }
  }

  .card:hover {
    flex-shrink: 0;
    z-index: 1;
    transform: translateY(-0.5rem) rotate(1deg);
  }

  /* 滚动条背景 */
  &::-webkit-scrollbar {
    display: none;
  }
}
</style>